In this section, we will learn how to set the dimensions of elements.
Here is an example of a CSS3 document including properties like text-align: center, left or right .
In addition to overflow and scroll bars which are used in case the text gets larger in box and it overflows,
a scroll bar will be visible at the right-hand side.
===============================================================
Here is the code of the HTML and embedded CSS style sheets:
===========================================================
<html>============================================================================================
<head>
<title> Dimensions of the element </title>
<style type="text/css">
body {font-family: arial, sans-serif;} a:hover {text-decoration: underline; } li {font-weight: bolder;} h2 {font-family: arial, sans-serif; text-decoration: underline;} p {font-family: calibri; background-color:yellow; font-size: large; margin-bottom: 1em;} </style>
</head>
<body>
<p style = "width:40%; text-align:center"> This is an example that illustrates how centered text can be framed into a box which
in turn is supposed to expand about 40% width-wide. </p>
<p style = "width:60%"> This is an example that illustrates how text can be framed into a box which
in turn is supposed to expand about 60% width-wide. </p>
<p style = "width:30%; height:100px; overflow:scroll"> There it's a case where the box has a fixed height of 100px
30% of the width, and in case it overflows there will be a scroll bar to the side. </p>
</body>
</html>
The rendered document looks like this: